<template>
  <div class="space-usage-analyze">
    <!-- 使用 flex 布局，并设置响应式换行 -->
    <a-flex gap="middle" class="card-container">
      <a-card title="存储空间" class="stat-card">
        <div class="chart-container">
          <h3>{{ formatSize(data.usedSize) }} / {{ data.maxSize ? formatSize(data.maxSize) : '无限制' }}</h3>
          <a-progress type="dashboard" :percent="data.sizeUsageRatio ?? 0" />
        </div>
      </a-card>
      <a-card title="图片数量" class="stat-card">
        <div class="chart-container">
          <h3>{{ data.usedCount }} / {{ data.maxCount ?? '无限制' }} </h3>
          <a-progress type="dashboard" :percent="data.countUsageRatio ?? 0" />
        </div>
      </a-card>
    </a-flex>
  </div>
</template>

<script setup lang="ts">
import { ref, watchEffect } from 'vue'
import { getSpaceUsageAnalyzeUsingPost } from '@/api/spaceAnalyzeController'
import { message } from 'ant-design-vue'
import { formatSize } from '@/util'

// 定义父组件传递的参数
interface props {
  queryAll?: boolean
  queryPublic?: boolean
  spaceId?: number
}

// 使用withDefaults定义默认值
const props = withDefaults(defineProps<props>(), {
  queryAll: false,
  queryPublic: false
})

// 定义加载状态
const loading = ref(true)

// 定义获取的数据源
const data = ref<API.SpaceUsageAnalyzeVO>({})

// 向后端获取空间资源的使用情况
const getSpaceUsageAnalyze = async () => {
  loading.value = true

  const res = await getSpaceUsageAnalyzeUsingPost({
    queryAll: props.queryAll,
    queryPublic: props.queryPublic,
    spaceId: props.spaceId
  })
  if (res.data.code === 0 && res.data.data) {
    data.value = res.data.data ?? {}
  } else {
    message.error('获取数据失败，' + res.data?.message)
  }

  loading.value = false
}

// 监听变量的变化，变量变化时重新加载数据
watchEffect(() => {
  getSpaceUsageAnalyze();
})
</script>

<style scoped>
/* 容器设置 flex 布局，支持响应式换行 */
.card-container {
  display: flex;
  flex-wrap: wrap; /* 屏幕变小时自动换行 */
  width: 100%; /* 占满父容器宽度 */
}

/* 卡片样式：自适应宽度，小屏幕单列显示 */
.stat-card {
  flex: 1; /* 自动分配剩余空间，替代固定 50% */
  min-width: 280px; /* 最小宽度，防止过度压缩 */
}

/* 图表容器：固定高度，确保图表显示完整 */
.chart-container {
  height: 320px;
  text-align: center;
  padding: 16px; /* 内部间距，避免内容贴边 */
}
</style>
